<!-- 回款列表-新建回款信息组件  -->
<template>
  <a-modal
    width="80%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
  >
    <template #title> 新建付款信息 </template>
    <div>
      <a-form :model="form" :rules="rules" auto-label-width>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="returnedCode" label="付款编号：">
              <a-input
                placeholder="请输入付款编号"
                size="large"
                v-model="form.payNumber"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="returnedType" label="付款类别：">
              <a-select placeholder="请选择付款类别" v-model="form.payType">
                <a-option
                  v-for="item in settingData"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="returnedWays" label="付款方式：">
              <a-input
                style="color: black"
                placeholder="请输入付款方式"
                size="large"
                v-model="form.payMode"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="returnedTime" label="付款时间：">
              <a-date-picker
                show-time
                value-format="x"
                v-model="form.payTime"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="accountName" label="账号名称：">
              <a-cascader
                :field-names="fieldNames"
                :options="tableList.list"
                :style="{ width: '320px' }"
                v-model="form.accountId"
                @change="cgeAccount"
                placeholder="请选择账号名称"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="account" label="账号：">
              <a-input
                disabled
                placeholder="选择账户名称获取"
                size="large"
                v-model="form.account"
                allow-clear
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="bank" label="开户行：">
              <a-input
                disabled
                placeholder="选择账户名称获取"
                size="large"
                v-model="form.bank"
                allow-clear
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="returnedMoney" label="付款金额：">
              <a-input-number
                :min="1"
                placeholder="请输入付款金额"
                allow-clear
                :max="form.waitPayPrice"
                v-model="form.payPrice"
              >
                <template #prepend>￥</template>
                <template #append>
                  <a-select
                    :style="{
                      width: '100px',
                    }"
                    placeholder="人民币"
                    v-model="form.payPriceUnit"
                  >
                    <a-option>人民币</a-option>
                    <a-option>美金</a-option>
                  </a-select>
                </template>
              </a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="contractMoney" label="总金额：">
              <a-input-number
                :min="1"
                placeholder="请输入合同总额"
                allow-clear
                v-model="form.totalPrice"
                disabled
              >
                <template #prepend>￥</template>
                <template #append>
                  <a-select
                    :style="{
                      width: '100px',
                    }"
                    placeholder="人民币"
                    v-model="form.totalPriceUnit"
                  >
                    <a-option>人民币</a-option>
                    <a-option>美金</a-option>
                  </a-select>
                </template>
              </a-input-number>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="AccuReturnedMoney" label="累计付款金额：">
              <a-input-number
                :min="1"
                placeholder="请输入累计回款金额"
                allow-clear
                v-model="form.accumulatedPayPrice"
                disabled
              >
                <template #prepend>￥</template>
                <template #append>
                  <a-select
                    :style="{
                      width: '100px',
                    }"
                    placeholder="人民币"
                    v-model="form.accumulatedPayPriceUnit"
                  >
                    <a-option>人民币</a-option>
                    <a-option>美金</a-option>
                  </a-select>
                </template>
              </a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="noReturnedMoney" label="未付款金额：">
              <a-input-number
                :min="1"
                placeholder="请输入未回款金额"
                allow-clear
                v-model="form.waitPayPrice"
                disabled
              >
                <template #prepend>￥</template>
                <template #append>
                  <a-select
                    :style="{
                      width: '100px',
                    }"
                    placeholder="人民币"
                    v-model="form.waitPayPriceUnit"
                  >
                    <a-option>人民币</a-option>
                    <a-option>美金</a-option>
                  </a-select>
                </template>
              </a-input-number>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="file" label="凭证上传：">
              <a-upload action="/"></a-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, watchEffect, watch, ref } from 'vue';
  import { cloneDeep } from 'lodash';
  import {
    GetAccountInfo,
    PostAccountInfo,
    DelAccountInfo,
    GetReceivableAccount,
  } from '@/api/order-management/returned-management/base-setting';
  import { GetReturnedTypeInfo } from '@/api/order-management/returned-management/base-setting';
  import { Message } from '@arco-design/web-vue';

  // 获取回款类型设置基本信息
  const settingData = ref();
  const getClientSettingInfo = async () => {
    const res = await GetReturnedTypeInfo();
    settingData.value = res;
  };

  getClientSettingInfo();

  const form = ref<any>({
    id: null,
    payType: null,
    payNumber: '',
    payMode: '',
    accountId: null,
    payTime: undefined,
    totalPrice: '',
    totalPriceUnit: '人民币',
    payProofFileId: undefined,
    createdAt: undefined,
    updatedAt: undefined,
    deletedAt: null,
    account: null,
    bank: '',
    payPrice: 10000,
    payPriceUnit: '',
    waitPayPrice: '',
    waitPayPriceUnit: '人民币',
    receivablePrice: '',
    receivablePriceUnit: '人民币',
    accumulatedPayPriceUnit: '',
    accumulatedPayPrice: '人民币',
  });

  // const formPriceData = reactive({});

  const formKey = Object.keys(form.value);
  const props = withDefaults(
    //参数说明
    defineProps<{
      visible: boolean;
      currForm: any;
      orderId: string;
    }>(),
    {
      visible: false,
    }
  );

  const emit = defineEmits(['update:visible', 'editReturnedEmit']);

  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  // let form = ref<any>({});

  // 储存账户数据
  const tableList = reactive<any>({
    list: [],
  });
  const fieldNames = {
    value: 'id',
    label: 'accountName',
    children: 'accountData',
  };
  // 获取账户数据
  const getData = async () => {
    try {
      const res = await GetAccountInfo({
        pageData: {
          page: 0,
          size: -1,
        },
      });
      let id = 1; // 后端的结构最外层没返回id，自己设置一个id
      res.forEach((item: any) => {
        id += 1;
        item.id = id;
        item.accountName = item.typeName;
        delete item.typeName;
      });
      tableList.list = JSON.parse(JSON.stringify(res));
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getData();

  const cgeAccount = async (id) => {
    const res = await GetReceivableAccount({ id });
    form.value.bank = res.AccountBank;
    form.value.account = res.AccountNumber;
  };

  watchEffect(() => {
    if (modalVisible.value) {
      let msg = {
        id: null,
        payType: null,
        payNumber: '',
        payMode: '',
        accountId: null,
        payTime: undefined,
        totalPrice: '',
        totalPriceUnit: '人民币',
        payProofFileId: undefined,
        createdAt: undefined,
        updatedAt: undefined,
        deletedAt: null,
        account: null,
        bank: '',
        payPrice: 0,
        payPriceUnit: '',
        waitPayPrice: '',
        waitPayPriceUnit: '人民币',
        receivablePrice: '',
        receivablePriceUnit: '人民币',
        accumulatedPayPriceUnit: '人民币',
        accumulatedPayPrice: undefined,
      };
      for (let i in props.currForm) {
        if (formKey.includes(i)) msg[i] = props.currForm[i];
      }
      form.value = msg;
      form.value.accountId = null;
    }
  });
  const rules = reactive({});

  // 保存按钮
  const handleOk = () => {
    emit('editReturnedEmit', form.value);
    modalVisible.value = false;
  };

  // 取消按钮
  const handleCancel = () => {
    modalVisible.value = false;
  };
</script>

<style scoped lang="less"></style>
